<!DOCTYPE html> 
<html> 
	<head> 
		<title>InMobile v2 - Better Mobile &amp; Tablet Template</title> 
        
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
        
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
      
       


        <link rel="stylesheet" href="__PUBLIC__/themes/dark_blue.css" />
        
        <link rel="stylesheet" href="__PUBLIC__/styles/style.css" />
        
		<script type="text/javascript" src="__PUBLIC__/scripts/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/scripts/in-mobile.js"></script>
        <script type="text/javascript" src="__PUBLIC__/scripts/jquery.flexslider-min.js"></script>
		<script type="text/javascript">
			var $ = jQuery.noConflict();
			$(window).load(function() {
				$('.flexslider').flexslider({
					animation: "slide",
					directionNav: false,
					animationLoop: false,
					controlNav: false, 
					slideToStart: 0,
					slideshow: true,
					animationDuration: 300
				});
			});
		</script>


	</head>
    <body>
        <div data-role="page" id="home" data-theme="a">
          <!-- /Header -->
          <div data-role="content">
          	<div id="logo">
            	<h1>InMobile v2</h1>
                <h2>Even Better Mobile and Tablet Optimized Template</h2>
            </div>  
            
            <div class="flexslider">
            	<ul class="slides">
                    <li><img src="__PUBLIC__/images/slider/3.jpg" alt="" title="" /><p class="slider-description">Swipe Horizontally with Finger</p></li>
                    <li><img src="__PUBLIC__/images/slider/2.jpg" alt="" title="" /></li>
                    <li><img src="__PUBLIC__/images/slider/1.jpg" alt="" title="" /></li>
                </ul>
            </div>
            
            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">

                <li>
                    <a href="http://houge.mcooz.com/kros/index/gallery" rel="external">
                        <h3>吼歌</h3>
                        <p>You have two types of gallery.</p>
                    </a>
                </li>
                <li>
                    <a href="http://houge.mcooz.com/kros/index/about">
                        <h3>达人秀</h3>
                        <p>How may look your About us subpage.</p>
                    </a>
                </li>
                <li>
                    <a href="http://houge.mcooz.com/kros/index/features">
                        <h3>拍客</h3>
                        <p>Not all features of this amazing theme is shown here.</p>
                    </a>
                </li>
                <li>
                    <a href="http://houge.mcooz.com/kros/index/typography">
                        <h3>手机评测</h3>
                        <p>Clean and readable typography.</p>
                    </a>
                </li>
                <li>
                    <a href="http://houge.mcooz.com/kros/index/contact">
                        <h3>吐槽</h3>
                        <p>InMobile v2 comes with full working contact form.</p>
                    </a>
                </li>
            </ul>
            
            <div id="social">
                <a href="#">f</a>
                <a href="#">t</a>
                <a href="#">u</a>
                <a href="#">i</a>
                <a href="#">j</a>
            </div>
            
           </div>
           <!-- /Content -->
           <div data-role="footer" data-theme="c">
            <div data-role="navbar" data-grid="c" data-theme="a" data-position="fixed">
                <ul>
                    <li><a href="http://g.co/maps/55r27" data-icon="search" data-theme="a">Map</a></li>
                    <li><a href="mailto:youremail@company.org" data-icon="info" data-theme="a">Mail</a></li>
                    <li><a href="gallery.html" data-icon="star" data-theme="a" rel="external">Portfolio</a></li>
                    <li><a href="#" data-icon="arrow-u" data-theme="a" class="returnTopAction">Return Top</a></li>
                </ul>
			</div>
          </div>
          <!-- /Footer --> 
        </div>
        <!-- /Home -->      
        
        <div data-role="page" data-add-back-btn="true" data-theme="a" id="contact">
        
        <script>

		$('#send-feedback').live("click", function() {
			var url = 'contact-form.php';
			var error = 0;
			var $contactpage = $(this).closest('.ui-page');
			var $contactform = $(this).closest('.contact-form');
			$('.required', $contactform).each(function (i) {
				if ($(this).val() === '') {
					error++;
				}
			}); // each
			if (error > 0) {
					alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
			} else {
				var firstname = $contactform.find('input[name="firstname"]').val();
				var surname = $contactform.find('input[name="surname"]').val();
				var state = $contactform.find('select[name="state"]').val();
				var mobilephone = $contactform.find('input[name="mobilephone"]').val();
				var email = $contactform.find('input[name="email"]').val();
				var message = $contactform.find('textarea[name="message"]').val();	
		
				//submit the form
				$.ajax({
					type: "GET",
					url: url,
					data: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},
					success: function (data) {
						if (data == 'success') {
							// show thank you
							$contactpage.find('.contact-thankyou').show();
							$contactpage.find('.contact-form').hide();
						}
					},
					error: function (xhr, ajaxOptions, thrownError){ alert(xhr.responseText); }
				}); //$.ajax
				alert("Thank you for your message");
			}
			return false;
		});
		
		</script>
		
    
          <div data-role="header" style="margin-bottom: 30px" data-theme="c">
          
              <div data-role="navbar" data-theme="a" data-position="fixed">
                    <ul>
                        <li><a href="index.html" data-icon="arrow-l" data-theme="a" rel="external">Back</a></li>
                    </ul>
              </div>
            
          </div><!-- Header -->
          
          <div data-role="content">
          	<div class="ui-body ui-body-a">
             		
                <h2>Contact our professional team!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt purus ut massa ornare fermentum. Phasellus non aliquet nulla. In nec urna lacus, eu convallis nisl. Integer hendrerit nulla a lacus mollis porttitor.</p><br />
                
               <div class="contact-thankyou" style="display: none;">
			Thank you.  Your message has been sent.  We will get back to you as soon as we can.
		</div>
		<div class="contact-form">
			<div data-role="fieldcontain" class="text-field">
				<label for="firstname">First Name*:</label>
				<input type="text" name="firstname" value="" placeholder="" class="required" id="firstname" />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="surname">Last Name:</label>
				<input type="text" name="surname" value="" placeholder="" id="surname" />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="email">Email Address*:</label>
				<input type="email" name="email" value="" placeholder="" class="required" id="email"  />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="mobilephone">Mobile Number:</label>
				<input type="number" name="mobilephone" value="" placeholder="" id="mobilephone" />
			</div>
			<div data-role="fieldcontain">
				<label for="state">State:*</label>
					<select name="state" class="required" id="state">
						<option value="" data-placeholder="true">Please select your state</option>
						<option value="ACT">ACT</option>
						<option value="NSW">NSW</option>
						<option value="NT">NT</option>
						<option value="QLD">QLD</option>
						<option value="SA">SA</option>
						<option value="TAS">TAS</option>
						<option value="VIC">VIC</option>
						<option value="WA">WA</option>
					</select>
			</div>
			<div data-role="fieldcontain">
				<label for="message">Message*:</label>
				<textarea name="message" id="message" placeholder="" class="required"></textarea>
			</div>
            <p class="mandatory">* required fields</p>
			<div class="send"><a href="javascript:;" data-role="button" data-theme="a" data-iconpos="right" id="send-feedback">Send!</a></div>
			</div>
                
            </div>
          </div>
          
          <!-- /Content -->
          
          <div data-role="footer" data-theme="c">
            <div data-role="navbar" data-grid="c" data-theme="a" data-position="fixed">
                <ul>
                    <li><a href="http://g.co/maps/55r27" data-icon="search" data-theme="a">Map</a></li>
                    <li><a href="mailto:youremail@company.org" data-icon="info" data-theme="a">Mail</a></li>
                    <li><a href="gallery.html" data-icon="star" data-theme="a" rel="external">Portfolio</a></li>
                    <li><a href="#" data-icon="arrow-u" data-theme="a" class="returnTopAction">Return Top</a></li>
                </ul>
			</div>
          </div>
          <!-- /Footer --> 
        </div>
    </body>
</html>
